<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>    
<%@ include file="/taglibs.jsp"%>
<script type="text/javascript" charset="UTF-8" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.7.2.custom.css"/>
<!-- 月历 -->
<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="/css/smoothness.datepick.css"/>
<!-- 時間 -->	
<script type="text/javascript" src="/js/jquery.timePicker.js"></script>
<link rel="stylesheet" type="text/css" href="/css/timePicker.css"/>	

<link rel="stylesheet" href="/css/jquery.tooltip.css" />
<script src="/js/jquery.tooltip.min.js" type="text/javascript"></script>
<script src="/js/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" charset="UTF-8" src="/js/yaodian100.common.js"></script>

<script type="text/javascript">
$().ready(function(){
	var uniId=1;
	$('#startDateParam').datepick({minDate: new Date(), showOn: 'both',numberOfMonths:2,
    	buttonImageOnly: true, buttonImage: '<%=ServerValue.getMidContextPath()%>/images/calendar.gif',dateFormat:"yy-mm-dd",yearRange: '-50:+50'});
	$('#endDateParam').datepick({minDate: new Date(), showOn: 'both', numberOfMonths:2,
    	buttonImageOnly: true, beforeShow:customRange, buttonImage: '<%=ServerValue.getMidContextPath()%>/images/calendar.gif',dateFormat:"yy-mm-dd",yearRange: '-50:+50'});
	function customRange (){
		var startDt = $('#startDateParam').val(); //起始日
		var endDt = new Date(parseInt(startDt.substring(0,4),10),parseInt(startDt.substring(5,7),10)-1,parseInt(startDt.substring(8,10),10)); //結束日
		return {minDate:endDt}; 
	}
	$("#timestart").timePicker({step:60, startTime:"00:00", endTime:"23:00"});
	$("#timeend").timePicker({step:60, startTime:"00:59", endTime:"23:59"});
	$("#addCol").click(function(){
		
		var htmlC = "<tr id=\"col_"+uniId+"\"><td><input type=\"text\" name=\"x1\" size=\"5\" maxlength=\"4\" value=\"\"></td>"+
	    	"<td><input type=\"text\" name=\"y1\" size=\"5\" maxlength=\"4\" value=\"\"></td>"+
	    	"<td><input type=\"text\" name=\"x2\" size=\"5\" maxlength=\"4\" value=\"\"></td>"+
	    	"<td><input type=\"text\" name=\"y2\" size=\"5\" maxlength=\"4\" value=\"\"></td>"+
	    	"<td><input type=\"text\" name=\"href\" size=\"20\" maxlength=\"256\" value=\"\"></td>"+
	    	"<td><input type=\"text\" name=\"coTitle\" size=\"20\" maxlength=\"20\" value=\"\"></td> "+
	    	"<td><input type=\"button\" name=\"deleteRow\" value=\"删除\" onClick=\"javascript:deleteThisRow('col_"+uniId+"')\"></td>"
	"</tr>";
		$("#addColHere").append(htmlC);
		uniId++;

		});
	$("#checkForm").click(function(){
		var error = 0;
		var empty = 0;
		$("form input:text").each(function(){
			$(this).attr("style","");
			
			if($.trim($(this).val())=="" && $(this).attr("name")!="coTitle"){
				$(this).css("border","2px solid red");
				empty++;
				error++;
			}
		});
		
		//if($.trim($("#imageSmall").val())==""&&$.trim($("#sampleimage").val())==""){
		//	$("#imageSmall").css("border","2px solid red");
		//	empty++;
		//}
		if($.trim($("#imageBig").val())==""&&$.trim($("#image").val())==""){
			$("#imageBig").css("border","2px solid red");
			empty++;
		}
		if(empty>0){
			alert("红框标示处不可为空");
		}	
		if($("#imgCorrect").val()!=""){
			alert($("#imgCorrect").val() + "，的图片规格不符合规范，请检查图片尺寸、大小。");
			error++;
			return false;		
		}
		if ( !dateDiff($("#startDateParam").val() , $("#timestart").val() ,$("#endDateParam").val()  , $("#timeend").val())){
			 alert("活动結束日期不可大于活动起始日期");
			 return false;
		}
		if(error==0){
			$("#hao123DetailFom").submit();
		}
	});
	$("#imageSmall").change(function(){
	
		chkImage(this);
		
	});
	$("#cleanImgS").click(function(){
		//alert($("#imgCorrect").val());
		$("#smallPic").html("<input class=\"multi MultiFile-applied\" type=\"file\" accept=\"gif|jpg\" maxlength=\"1\" id=\"imageSmall\" name=\"imageSmall\" size=\"80%\" onChange=\"chkImage(this);\"/>");
		$("#imgCorrect").val("");
	});
	
		
	
	
	
	
});
//日期判断,计算天数差的函数
function dateDiff(sDate1,sTime1, sDate2,sTime2){ //sDate1和sDate2是2002-12-18格式
	 var startDate = new Date(sDate1.split("-")[0],eval(sDate1.split("-")[1])-1,sDate1.split("-")[2],sTime1.split(":")[0],sTime1.split(":")[1],00); 
	 var endDate = new Date(sDate2.split("-")[0],eval(sDate2.split("-")[1])-1,sDate2.split("-")[2],sTime2.split(":")[0],sTime2.split(":")[1],00);
 if ( startDate >= endDate )return false;
 else return true;
}
function deleteThisRow(rowId){
	$("#"+rowId).remove();
}
function chkImage(obj){
	if ( "" != $(obj).val() ){
		checkImg(obj,30,212,150,$("#imgCorrect"),"");
	}	
}
</script>

<h1>Hao123活动设置</h1>
<div class="f-link"><a href="hao123Main.do">回列表页</a></div><br><br><br><br>
<font color="#ff3300"><s:actionerror /></font>
<form action="saveHao123Detail.do" method="post" id="hao123DetailFom" enctype ="multipart/form-data" >
<input type="hidden" id="detailId" name="detailId" value="${detailId }"/>

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tb-data">
<tr>
  	<td class="bg-yl">*站点名称&lt;website&gt;(长度25个中文字)</td>
    <td><input type="text" name="website" maxlength="25" size="60" value="${hao123.website }"></td>
  </tr>
  <tr>  	
    <td class="bg-yl">*活动链接&lt;activityurl&gt;<br>(请填写本次促销或折扣活动的链接)</td>
    <td ><input type="text" name="activityurl" maxlength="256" size="100" value="${hao123.activityurl }"></td>
  </tr>
   <tr>  	
    <td class="bg-yl">*活动分类&lt;category&gt;</td>
    <td >
    <s:select label="订单状态" name="category" value="%{hao123.category}"
		list="categoryMenu.options" listKey="key" listValue="value.name" />
    </td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动标签&lt;keyword1&gt;(长度10个中文字)</td>
    <td ><input type="text" name="keyword1" maxlength="10" size="20" value="${hao123.keyword1 }"></td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动标签&lt;keyword2&gt;(长度10个中文字)</td>
    <td ><input type="text" name="keyword2" maxlength="10" size="20" value="${hao123.keyword2 }"></td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动标签&lt;keyword3&gt;(长度10个中文字)</td>
    <td ><input type="text" name="keyword3" maxlength="10" size="20" value="${hao123.keyword3 }"></td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*是否为主打活动&lt;major&gt;</td>
    <td ><input type="radio" name="major" value="1" ${hao123.major=='1'?'checked':'' }>是<input type="radio" name="major" value="0" ${hao123.major=='0'?'checked':hao123.major=='1'?'':'checked' }>否</td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动内容&lt;title&gt;(长度20个中文字)</td>
    <td ><input type="text" name="title" maxlength="20" size="40" value="${hao123.title }"></td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动海报小图&lt;sampleimage&gt;(212x150) <30k</td>
    <td >
    <span id="smallPic"><input class="multi MultiFile-applied" type="file" accept="gif|jpg" maxlength="1" id="imageSmall" name="imageSmall" size="80%"/></span>
    <input type="hidden" id="imgCorrect" value=""/>
    <input type="hidden" id="sampleimage" name="sampleimage" value="${hao123.sampleimage  }"/>
    <input type="button" id="cleanImgS" value="清除檔案" >
    <br>
    <img alt="活动海报小图" src="${imageSPath}">
    </td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动海报大图&lt;image&gt;</td>   
    <td >
    <input class="multi MultiFile-applied" type="file" accept="gif|jpg" maxlength="1" id="imageBig" name="imageBig" size="80%"/><br>
    <input type="hidden" id="image" name="image" value="${hao123.image }"/>
    <img alt="活动海报大图" src="${imageBPath}">
    </td>
  </tr>
  <tr>  	
    <td class="bg-yl">*活动开始时间&lt;startTime&gt;</td>
    <td >       
		<input type="text" name="startDateParam" id="startDateParam" size="20" value="<fmt:formatDate value="${hao123.startTime}" pattern="yyyy-MM-dd" />"/>	 
		<input id="timestart" name="timestart" type="text" value="<fmt:formatDate value="${hao123.startTime}" pattern="HH:mm" />"  size="10"/>
    </td>
  </tr>  
   <tr>  	
    <td class="bg-yl">*活动结束时间&lt;endTime&gt;</td>
    <td >
   		<input type="text" name="endDateParam" id="endDateParam" size="20" value="<fmt:formatDate value="${hao123.endTime}" pattern="yyyy-MM-dd" />"/>	
		<input id="timeend" name="timeend" type="text" value="<fmt:formatDate value="${hao123.endTime}" pattern="HH:mm" />" size="10"/>
    </td>
  </tr>
 </table>
 <br><br>
 <table width="100%" border="1" cellspacing="0" cellpadding="0" class="tb-data">
   <tr>  	
    <td class="bg-yl">*活动海报大图热点链结&lt;set&gt;&lt;item&gt;
    <input type="button" id="addCol" value="新增"/>
    </td>
    <td >
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="addColHere" >
    
    <tr>
    	<td>&lt;x1&gt;</td>
    	<td>&lt;y1&gt;</td>
    	<td>&lt;x2&gt;</td>
    	<td>&lt;y2&gt;</td>
    	<td>热点链接网址&lt;href&gt;</td>
    	<td>mouse over显示文字&lt;title&gt;</td>    	
    </tr>
    <c-rt:forEach items="${hao123Cos}" var="hao123Co" varStatus="col">
    <tr id="col_${col.count }">
    	<td><input type="text" name="x1" size="5" maxlength="4" value="${hao123Co.x1}"></td>
    	<td><input type="text" name="y1" size="5" maxlength="4" value="${hao123Co.y1}"></td>
    	<td><input type="text" name="x2" size="5" maxlength="4" value="${hao123Co.x2}"></td>
    	<td><input type="text" name="y2" size="5" maxlength="4" value="${hao123Co.y2}"></td>
    	<td><input type="text" name="href" size="20" maxlength="256" value="${hao123Co.href}"></td>
    	<td><input type="text" name="coTitle" size="20" maxlength="20" value="${hao123Co.title}"></td>
    	<td><input type="button" name="deleteRow" value="删除" onClick="javascript:deleteThisRow('col_${col.count}')"></td>
    </tr>
    </c-rt:forEach>
    
    </table>
    </td>
  </tr>
 
  
</table>
</form>
<div class="f-link">
	<a href="#" id="checkForm">储存</a>
	<a href="hao123Main.do">回列表页</a>
</div>